<script setup lang="ts">
import {
  reactive,
  ref,
} from 'vue';

import  { AxiosError, AxiosResponse } from 'axios';
import { FormInstance, FormRules } from 'element-plus';
import {
  ElLoading,
  ElMessage,
} from 'element-plus';

import api from '@/utils/api';

//外部的参数
const prop = defineProps({
    accountInfo: {
        type: Object
    }
});

//自定义事件
const emit = defineEmits(['pre', 'next']);

//表单数据
const info = reactive({
    account: '',
    sex: '1',
    password: '',
    name: ''
})
//表单的实例
const formRef = ref();
//数据校验
const rules = reactive<FormRules<typeof info>>({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((isValid: boolean) => {
        if (!isValid) {
            return;
        }
        //显示加载动画
        const loading = ElLoading.service({
            lock: true,
            text: '正在处理',
            background: 'rgba(0, 0, 0, 0.7)',
        });
        //请求接口，进行登陆
        api.post('/api/register', {
            account: info.account,
            sex: info.sex,
            password: info.password,
            phone: prop.accountInfo.account,
            captcha: prop.accountInfo.captcha,
            name: info.name
        }).then((response: AxiosResponse<any>) => {
            if (response.status != 200 || !response.data || response.data.code != 200) {
                if (response.data) {
                    ElMessage.error('处理失败:' + response.data.msg)
                } else {
                    ElMessage.error('处理失败!')
                }
                return;
            }
            emit('next');
        }).catch((error: AxiosError<any>) => {
            if (error.response && error.response.data) {
                ElMessage.error(error.response.data.msg)
                return;
            }
            ElMessage.error('操作异常：' + error.message)
        }).finally(() => {
            loading.close();
        });
    })
    return null;
}
</script>

<template>
    <el-form ref="formRef" :model="info" :rules="rules" size="large" label-width="120" class="infoForm" status-icon>
        <el-form-item label="账号：" prop="account">
            <el-input v-model="info.account" placeholder="请输入账号" suffix-icon="UserFilled" />
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
            <el-input v-model="info.name" placeholder="请输入姓名" suffix-icon="UserFilled" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
            <el-input v-model="info.password" type="password" placeholder="请输入密码" suffix-icon="Lock" />
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="info.sex">
                <el-radio label="1" value="1" size="large">男</el-radio>
                <el-radio label="2" value="2" size="large">女</el-radio>
                <el-radio label="3" value="3" size="large">保密</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="">
            <div class="formBtns">
                <el-button type="danger" @click="emit('pre')">上一步</el-button>
                <el-button type="primary" @click="submitForm(formRef)">
                    注册
                </el-button>
            </div>
        </el-form-item>
    </el-form>
</template>

<style scoped>
.infoForm {
    width: 50%;
    margin: 0 auto;
}

.infoForm .formBtns {
    margin: 0 auto;
}

.infoForm .formBtns .el-button {
    width: 150px;
}

.flex {
    display: flex;
    width: 100%;
}

.flex .flexItem {
    flex: 1
}
</style>